<template name="nuevo">
    <h2>Nuevo Rol</h2>
    <form method="post" action="{{nuevo_rol}}" onsubmit="return serializeGroup();">
        <table style="width: 100%">
            <tr>
                <th colspan="2">
                    <span>*</span>
                    Nombre del rol
                </th>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="text" name="rol[nombre]" maxlength="40" style="width: 100%" value="{{['rol']['nombre']}}" />
                </td>
            </tr>
            <tr>
                <th colspan="2">
                    <span>*</span>
                    Descripci&oacute;n del rol
                </th>
            </tr>
            <tr>
                <td colspan="2">
                    <textarea name="rol[descripcion]" style="width: 100%">{{['rol']['descripcion']}}</textarea>
                </td>
            </tr>
            <tr>
                <th colspan="2">
                    Acciones del Rol - PERMITIDAS
                </th>
            </tr>
            <tr>
                <td>
                    <br/>
                    <strong><small>Arrastre aqu&iacute; aquellas acciones del sistema que SI ser&aacute;n permitidas para este rol</small></strong>
                    <br/>
                    <br/>
                    <ul id="acciones_rol_permitidas" class="connectedSortable">
                        <template name="acciones_rol_permitidas"><li class="ui-state-default {{visible_class}}" id="{{idaccion}}">{{nombre}}</li></template>
                    </ul>
                </td>
            </tr>
            <tr>
                <th colspan="2">
                    Acciones del Rol - NO PERMITIDAS
                </th>
            </tr>
            <tr>
                <td>
                    <br/>
                    <strong><small>Arrastre aqu&iacute; aquellas acciones del sistema que NO ser&aacute;n permitidas para este rol</small></strong>
                    <br/>
                    <br/>
                    <ul id="acciones_rol_no_permitidas" class="connectedSortable">
                        <template name="acciones_rol_no_permitidas"><li class="ui-state-default ui-state-disabled {{visible_class}}" id="{{idaccion}}">{{nombre}}</li></template>
                    </ul>
                </td>
            </tr>
            <tr>
                <th colspan="2">
                    Acciones del sistema
                </th>
            </tr>
            <tr>
                <td>
                    <br/>
                    <strong><small>Las acciones del sistema no asignadas se tomar&aacute;n por default como NO PERMITIDAS (excepto las de color verde) siempre y cuando no hayan sido especificadas por el rol del usuario</small></strong>
                    <br/>
                    <br/>
                    <ul id="acciones_sistema" class="connectedSortable">
                        <template name="acciones_sistema"><li class="ui-state-default {{visible_class}}" id="{{idaccion}}">{{nombre}}</li></template>
                    </ul>
                </td>
            </tr>
        </table>
        <br/>
        <small>Nota: Para insertar/borrar acciones a un rol, haga click en alguno de ellos y sin soltarlo arr&aacute;strelo hacia la lista correspondiente (permitidas o no permitidas).</small>
        <br/>
        <br/>
        <input type="submit" value="Guardar nuevo Rol" class="make_submit_button" id="submit_button" />
        <br/>
        <br/>
        <span class="requerido">*</span><span>Campos requeridos</span>
    </form>
    <!-- AUX OUTSIDE FORM TO AVOID POST -->
        <input type="hidden" name="rol[acciones][permitidas][]" id="acciones_rol_permitidas_foo" />
        <input type="hidden" name="rol[acciones][no_permitidas][]" id="acciones_rol_no_permitidas_foo" />
    <!-- /AUX OUTSIDE FORM TO AVOID POST -->
    <script type="text/javascript">
    $(function() {
        $( "#acciones_rol_permitidas" ).sortable({
            placeholder: "ui-state-highlight",
            connectWith: ".connectedSortable",
            update     : function( event, ui )
            {
                ui.item.removeClass('ui-state-disabled');
            }
        }).disableSelection();
        $( "#acciones_rol_no_permitidas" ).sortable({
            placeholder: "ui-state-highlight",
            connectWith: ".connectedSortable",
            update     : function( event, ui )
            {
                ui.item.addClass('ui-state-disabled');
            }
        }).disableSelection();
        $( "#acciones_sistema" ).sortable({
            placeholder: "ui-state-highlight",
            connectWith: ".connectedSortable",
            update     : function( event, ui )
            {
                ui.item.removeClass('ui-state-disabled')
            }
        }).disableSelection();
    });
    function serializeGroup()
    {
        var permitidas = $('#acciones_rol_permitidas').sortable('toArray');
        $(permitidas).each(function(){
            var aux = $('#acciones_rol_permitidas_foo').clone(true);
            aux.val(this);
            aux.removeAttr('id');
            $('#submit_button').after(aux);
        });
        var noPermitidas = $('#acciones_rol_no_permitidas').sortable('toArray');
        $(noPermitidas).each(function(){
            var aux = $('#acciones_rol_no_permitidas_foo').clone(true);
            aux.val(this);
            aux.removeAttr('id');
            $('#submit_button').after(aux);
        });
        return true;
    }
    </script>
</template>